import { Allotment } from "allotment";
import 'allotment/dist/style.css';
import Header from "./components/Header/index";
import CodeEditor from "./components/CodeEditor/index";
import Preview from "./components/Preview/index";
import { PlaygroundContext, PlaygroundProvider } from "./PlaygroundContext";
import './index.scss'
import { useContext } from "react";

function InnerReactPlayground() {
    const {theme, setTheme} = useContext(PlaygroundContext);
    return <div className={theme} style={{ height: '100vh' }}>
        <Header />
        <Allotment defaultSizes={[100, 100]}>
            <Allotment.Pane minSize={0}>
                <CodeEditor />
            </Allotment.Pane>
            <Allotment.Pane minSize={0}>
                <Preview />
            </Allotment.Pane>
        </Allotment>
    </div>
}

export default function ReactPlayground() {
    return <PlaygroundProvider>
        <InnerReactPlayground />
    </PlaygroundProvider>
}